import React, {
  useRef,
  useState,
  useEffect,
  useReducer,
  RefObject,
} from "react";
import styled from "styled-components";
import VideoComponent from "./VedioComponent";
import "./index.css";
type State = { count: number; gridCount: number };
type Action =
  | { type: "increment"; payload: number }
  | { type: "decrement"; payload: number }
  | { type: "setGridCount"; payload: number };

const MyDiv = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1px;
  background-color: #fff;
  color: white;
`;
const StyledDiv = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 
`;
const StyledImg = styled.img`
  width: 40px;
  height: 40px;
`;
const StyledButton = styled.button`
width: 100px;
height: 30px;
  margin-top: -8px;  
  font-size: 12px;
`;

const StyledContainer = styled.div`
  position: relative;
  background-color: #000000;
`;

const StyledLabel = styled.div`
  position: absolute;
  left: 0;
  bottom: 0;
  color: #ffffff; // 使文字在黑色背景上可见
  background-color: rgba(0, 0, 0, 0.5); // 半透明的背景
  padding: 10px; // 内边距
`;

function reducer(state: State, action: Action): State {
  let newState;
  switch (action.type) {
    case "increment":
      newState = { ...state, count: action.payload };
      break;
    case "decrement":
      newState = { ...state, count: action.payload };
      break;
    case "setGridCount":
      newState = { ...state, gridCount: action.payload };
      break;
    default:
      throw new Error();
  }
  console.log("newState:::", newState);
  return newState;
}
// function incrementAction(): Action {
//    return { type: "increment" };
// }
// function decrementAction(): Action {
//   return { type: "decrement" };
// }
function setGridCountAction(newGridCount: number): Action {
  return { type: "setGridCount", payload: newGridCount };
}
type AppProps = {
  amount: number;
  handleRefresh: () => void;
  handleAmountChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
};
//普罗米修斯 prometheus
function App({ amount ,handleRefresh, handleAmountChange}: AppProps) {
  const [state, dispatch] = useReducer(reducer, {
    gridCount: amount,
    count: 0,
  });
  //  const [gridCount, setGridCount] = useState(25);
  const videoRefs: RefObject<HTMLVideoElement>[] = Array(state.gridCount)
    .fill(0)
    .map(() => useRef<HTMLVideoElement>(null));
  const buttonNames: string[] = ["Home", "About", "Contact", "Help"];
  // const [state, dispatch] = useReducer(reducer, { count: 0 });

  useEffect(() => {
    // 在这里执行需要在组件挂载或更新时执行的操作
    // 例如加载视频
    videoRefs.forEach((videoRef) => {
      if (videoRef.current) {
        videoRef.current.load();
      }
    });
    // alert(state.gridCount)
  }, [videoRefs, state.gridCount]);
  // useEffect(() => {
  //   const max:number = 25;
  //   const timer = setInterval(() => {
  //      if(gridCount<max){
  //         setGridCount(gridCount => gridCount + 1);
  //         alert(gridCount);
  //      }
  //     setGridCount(prevCount => prevCount < 25 ? prevCount + 1 : prevCount);
  //   }, 2000);

  //   return () => {
  //     clearInterval(timer);
  //   };
  // }, []);

  const screenWidth = window.innerWidth; // 获取屏幕宽度
  let videoWidth = 200; // 每个视频的宽度 amount
  /*
  9
  10
  11
  */
  //  // 计算每个视频的宽度
  let columnCount = 3; // 计算列数
    if(state.gridCount<9){
      columnCount=3
    } else if(state.gridCount<16){
      columnCount=5;
    }  else if(state.gridCount<=25){
      columnCount=6;
    }  else if(state.gridCount<=35){
      columnCount=8;
    } else if(state.gridCount>36){
      columnCount=12;
    }
    videoWidth= Math.floor(screenWidth * 0.9 / columnCount);

  return (
    <MyDiv>
      <h1 style={{ textAlign: "center", fontFamily: "serif", fontSize: 12 ,color:"#000"}}>
        腾讯会议 
       
      </h1>
      <div>
      <input style={{maxHeight:30}} type="number" value={amount} onChange={(e)=>handleAmountChange(e)} />
        <button onClick={()=>handleRefresh()}>强制刷新</button>
      </div>
      <div id="25gongge" style={{ display: "flex", flexDirection: "row" }}>
        <button
          className="side-button"
          // onClick={() => dispatch.setGridCount(15)}
          onClick={() => {
            // handleAmountChange(6);
            handleRefresh();
          }}
        >
          +
        </button>
        <div className="grid"
            style={{ gridTemplateColumns: `repeat(${columnCount}, 1fr)` }}
        >
          {videoRefs.map((videoRef, index) => (
            <StyledContainer>
            <VideoComponent index={index} />
            <StyledLabel>
              <span>主持人:</span>
              <span> 姓名</span>
            </StyledLabel>
          </StyledContainer>
          ))}
        </div>
        <button
          className="side-button"
          onClick={() => {
            handleRefresh();
          }}
        >
          -
        </button>
      </div>
      <div className="button-bar">
      <StyledDiv>
          <StyledImg src={'/public/icon/fayankongzhiA.png'} alt="My Image" />
          <StyledButton key={1}>
            {"静音"}
          </StyledButton>
        </StyledDiv>
         <StyledDiv>
          <StyledImg src={'/public/icon/bangzhuA.png'} alt="My Image" />
          <StyledButton key={1}>
            {"停止视频"}
          </StyledButton>
        </StyledDiv>

        <StyledDiv>
          <StyledImg src={'/public/icon/biaojuekongzhiA.png'} alt="My Image" />
          <StyledButton key={1}>
            {"共享屏幕"}
          </StyledButton>
        </StyledDiv>

        <StyledDiv>
          <StyledImg src={'/public/icon/qiehuanzhujiA.png'} alt="My Image" />
          <StyledButton key={1}>
            {"邀请"}
          </StyledButton>
        </StyledDiv>

        <StyledDiv>
          <StyledImg src={'/public/icon/bangzhuA.png'} alt="My Image" />
          <StyledButton key={1}>
            {"管理成员"}
          </StyledButton>
        </StyledDiv>

        <StyledDiv>
          <StyledImg src={'/public/icon/hujiaoguanliA.png'} alt="My Image" />
          <StyledButton key={1}>
            {"聊天"}
          </StyledButton>
        </StyledDiv>

        <StyledDiv>
          <StyledImg src={'/public/icon/baodaokongzhiA.png'} alt="My Image" />
          <StyledButton key={1}>
            {"会议文档"}
          </StyledButton>
        </StyledDiv>

        <StyledDiv>
          <StyledImg src={'/public/icon/bangzhuA.png'} alt="My Image" />
          <StyledButton key={1}>
            {"设置"}
          </StyledButton>
        </StyledDiv>
      </div>
    </MyDiv>
  );
}

export default App;
